<script setup>
import bus from "src/utils/eventBus.js";

let prop = defineProps(['msg'])
let exp = window.explain;

const getEventGuide = () => {
  bus.$emit('clickEventGuide')
}
const getEventSituation = () => {
  bus.$emit('clickEventSituation')
}
const getEventMaterial = () => {
  bus.$emit('clickEventMaterial')
}
</script>

<template>
  <div class="answer-me">
    <div class="answer-icon">
      <img src="../../assets/images/panda.png" alt="">
    </div>
    <div class="me-ques">
      <div class="bg">
        <div class="ti">为您查询出{{ prop.msg.eventName }}的可操作项:</div>
<!--        <div v-show="exp">-->
<!--          <div class="kuai" v-for="x in prop.msg.text" v-show="x.content.length">-->
<!--            <div v-for="i in x.content" :class="x.textType">-->
<!--              <span v-html="i.con" class="span" v-show="!i.hideRow" :class="i.typewriter"></span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="material-list">
          <div class="mm" @click="getEventGuide">办事指南</div>
          <div class="mm" @click="getEventSituation">事项情形</div>
          <div class="mm" @click="getEventMaterial">申请材料</div>
        </div>
        <div class="tis">通过选择事项下属的属性，查看事项信息</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.answer-me {
  display: flex;
  margin-bottom: 10px;
  margin-top: 10px;

  .answer-icon {
    width: 30px;
    height: 30px;
    position: relative;
    top: 5px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }

  .me-ques {
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    margin-left: 10px;
    letter-spacing: 2px;

    .bg {
      background-color: #f5f5f5;
      padding: 20px;
      border-radius: 10px;
    }

    .ti {
      font-weight: bold;
      font-size: 16px;
    }

    .material-list {
      display: flex;
      padding-top: 20px;

      .mm {
        cursor: pointer;
        //background: #dbdbdb;
        background-color: #e0e0e0;
        border-radius: 5px;
        //border: 1px solid #dbdbdb;
        padding: 5px 15px;
        margin-right: 20px;
      }

      .mm:hover {
        transition: all .2s;
        scale: 1.1;
          background-color: #ffffff;
      }
    }

    .tis {
      padding-top: 10px;
      font-size: 12px;
      color: gainsboro;
      padding-left: 20px;
    }
  }
}

.extend {
  width: calc(100% - 45px);
  margin-left: 45px;
  height: 200px;
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px;

  .e1 {
    padding-bottom: 10px;
  }

  .e2 {
    display: flex;

    .e2-list {
      padding: 5px 15px;
      border-radius: 5px;
      background-color: #e5e5e5;
      margin-right: 10px;
    }

    .e2-list:hover {
      scale: 1.1;
      transition: all .3s;
      cursor: pointer;
    }
  }

  .e3 {
    .e3-tit {
      padding-top: 10px;
    }

    .e3-list {
      padding-left: 20px;
      padding-top: 5px;
      cursor: pointer;

      span:hover {
        border-bottom: 2px solid #e5e5e5;
      }
    }
  }
}

</style>
